<template>
	<view class="notice-detail-page">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<up-loading-icon mode="circle" size="40"></up-loading-icon>
		</view>

		<!-- 详情内容 -->
		<view v-else class="detail-container">
			<!-- 头部信息 -->
			<view class="header">
				<view class="type-tag">
					<up-tag 
						:text="notice.type" 
						:type="getNoticeTypeColor(notice.type)" 
						size="small"
					></up-tag>
				</view>
				<text class="title">{{ notice.title }}</text>
				<view class="meta-info">
					<view class="meta-item">
						<up-icon name="clock" size="14" color="#999"></up-icon>
						<text class="meta-text">{{ notice.createTime }}</text>
					</view>
					<view class="meta-item">
						<up-icon name="eye" size="14" color="#999"></up-icon>
						<text class="meta-text">{{ notice.views }}次浏览</text>
					</view>
				</view>
			</view>

			<!-- 正文内容 -->
			<view class="content">
				<rich-text :nodes="notice.content"></rich-text>
			</view>

			<!-- 附件（如果有） -->
			<view class="attachments" v-if="notice.attachments && notice.attachments.length">
				<view class="section-title">
					<up-icon name="folder" size="16" color="#666"></up-icon>
					<text>相关附件</text>
				</view>
				<view class="attachment-list">
					<view 
						class="attachment-item" 
						v-for="(file, index) in notice.attachments" 
						:key="index"
						@click="handleDownload(file)"
					>
						<up-icon name="file-text" size="20" color="#5B8CFF"></up-icon>
						<view class="file-info">
							<text class="file-name">{{ file.name }}</text>
							<text class="file-size">{{ file.size }}</text>
						</view>
						<up-icon name="download" size="18" color="#999"></up-icon>
					</view>
				</view>
			</view>

			<!-- 底部操作 -->
			<view class="footer-actions">
				<view class="action-left">
					<view class="action-item" @click="handleLike">
						<up-icon 
							:name="isLiked ? 'thumb-up-fill' : 'thumb-up'" 
							size="20" 
							:color="isLiked ? '#5B8CFF' : '#666'"
						></up-icon>
						<text :class="['action-text', { active: isLiked }]">
							{{ isLiked ? '已赞' : '点赞' }}
						</text>
					</view>
					<view class="action-item" @click="handleCollect">
						<up-icon 
							:name="isCollected ? 'star-fill' : 'star'" 
							size="20" 
							:color="isCollected ? '#FFA500' : '#666'"
						></up-icon>
						<text :class="['action-text', { active: isCollected }]">
							{{ isCollected ? '已收藏' : '收藏' }}
						</text>
					</view>
				</view>
				<up-button 
					type="primary" 
					size="small" 
					@click="handleShare"
				>
					分享
				</up-button>
			</view>

			<!-- 相关公告 -->
			<view class="related-section" v-if="relatedNotices.length">
				<view class="section-title">
					<up-icon name="list" size="16" color="#666"></up-icon>
					<text>相关公告</text>
				</view>
				<view class="related-list">
					<view 
						class="related-item" 
						v-for="item in relatedNotices" 
						:key="item.id"
						@click="handleRelatedClick(item.id)"
					>
						<view class="related-header">
							<up-tag 
								:text="item.type" 
								:type="getNoticeTypeColor(item.type)" 
								plain 
								size="mini"
							></up-tag>
							<text class="related-time">{{ item.createTime }}</text>
						</view>
						<text class="related-title">{{ item.title }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 公告详情数据
const notice = ref({
	id: 0,
	type: '',
	title: '',
	content: '',
	createTime: '',
	views: 0,
	attachments: []
});

// 加载状态
const loading = ref(true);

// 交互状态
const isLiked = ref(false);
const isCollected = ref(false);

// 相关公告列表
const relatedNotices = ref([]);

// 页面加载时获取公告ID
onLoad((options) => {
	if (options.id) {
		loadNoticeDetail(options.id);
	}
});

// 加载公告详情
const loadNoticeDetail = (id) => {
	loading.value = true;
	
	// 模拟数据
	setTimeout(() => {
		const mockData = {
			1: {
				id: 1,
				type: '通知',
				title: '校园平台更新公告',
				content: `
					<h2>亲爱的同学们：</h2>
					<p>为了给大家带来更好的体验，校园平台已完成新版本更新。本次更新主要包含以下内容：</p>
					
					<h3>一、新增功能</h3>
					<ul>
						<li><strong>交易区</strong>：支持校园二手物品交易，让闲置物品找到新主人</li>
						<li><strong>求助区</strong>：遇到困难可以发布求助信息，让热心同学来帮忙</li>
						<li><strong>知识库</strong>：分享学习资料和经验，共同进步</li>
					</ul>
					
					<h3>二、优化改进</h3>
					<ul>
						<li>界面设计全面升级，更加简洁美观</li>
						<li>优化发布流程，操作更加便捷</li>
						<li>提升系统性能，运行更加流畅</li>
						<li>修复已知问题，提高稳定性</li>
					</ul>
					
					<h3>三、使用提示</h3>
					<p>1. 发布交易信息时，请如实描述物品信息，上传清晰图片</p>
					<p>2. 发布求助时，请详细说明问题，方便他人理解和帮助</p>
					<p>3. 分享知识时，请确保内容准确、有价值</p>
					
					<p style="margin-top: 20px;">感谢大家一直以来的支持！如有任何问题或建议，欢迎在反馈区留言。</p>
					
					<p style="text-align: right; color: #999; margin-top: 30px;">校园平台运营团队<br/>2025年10月30日</p>
				`,
				createTime: '2025-10-30 10:00',
				views: 1523,
				attachments: [
					{ name: '更新说明文档.pdf', size: '2.3 MB', url: '' },
					{ name: '使用指南.docx', size: '1.5 MB', url: '' }
				]
			},
			2: {
				id: 2,
				type: '优化',
				title: 'UI界面全面优化',
				content: `
					<h2>界面优化说明</h2>
					<p>本次更新我们对整体界面进行了全面优化，主要改进如下：</p>
					
					<h3>设计理念</h3>
					<p>采用更简洁的设计风格，减少视觉干扰，让用户更专注于内容本身。使用统一的色彩体系，提升整体视觉协调性。</p>
					
					<h3>具体改进</h3>
					<ul>
						<li>优化卡片样式，增加阴影和圆角</li>
						<li>调整间距和字体大小，提升可读性</li>
						<li>统一图标风格，界面更加协调</li>
						<li>优化交互动画，操作更有反馈感</li>
					</ul>
					
					<p>希望新的界面能给大家带来更好的使用体验！</p>
				`,
				createTime: '2025-10-29 15:30',
				views: 856,
				attachments: []
			},
			3: {
				id: 3,
				type: '活动',
				title: '校园编程大赛报名开始',
				content: `
					<h2>比赛通知</h2>
					<p>一年一度的校园编程大赛即将开始，欢迎各位同学踊跃报名参加！</p>
					
					<h3>比赛信息</h3>
					<ul>
						<li><strong>报名时间：</strong>2025年10月28日 - 11月10日</li>
						<li><strong>比赛时间：</strong>2025年11月15日 14:00-17:00</li>
						<li><strong>比赛地点：</strong>计算机学院机房A区</li>
						<li><strong>参赛对象：</strong>全校在校学生</li>
					</ul>
					
					<h3>比赛规则</h3>
					<p>1. 个人赛形式，现场编程</p>
					<p>2. 比赛时长3小时，共5道题目</p>
					<p>3. 可使用任意编程语言</p>
					<p>4. 禁止使用网络和外部资料</p>
					
					<h3>奖项设置</h3>
					<ul>
						<li>一等奖1名：证书 + 奖金2000元</li>
						<li>二等奖3名：证书 + 奖金1000元</li>
						<li>三等奖5名：证书 + 奖金500元</li>
						<li>优秀奖若干：证书</li>
					</ul>
					
					<p><strong>报名方式：</strong>请在校园平台活动区报名，或联系计算机学院学生会。</p>
				`,
				createTime: '2025-10-28 09:00',
				views: 2341,
				attachments: [
					{ name: '比赛规则详细说明.pdf', size: '1.8 MB', url: '' }
				]
			},
			4: {
				id: 4,
				type: '通知',
				title: '平台维护通知',
				content: `
					<h2>系统维护通知</h2>
					<p>为了系统稳定运行和提供更好的服务，校园平台将进行系统维护升级。</p>
					
					<h3>维护时间</h3>
					<p><strong>2025年11月2日（本周六）凌晨 2:00 - 4:00</strong></p>
					
					<h3>影响范围</h3>
					<ul>
						<li>维护期间平台将无法访问</li>
						<li>所有功能暂停使用</li>
						<li>预计4:00恢复正常</li>
					</ul>
					
					<h3>维护内容</h3>
					<ul>
						<li>数据库优化升级</li>
						<li>服务器性能调优</li>
						<li>安全补丁更新</li>
						<li>系统组件升级</li>
					</ul>
					
					<p>请大家合理安排使用时间，避开维护时段。维护期间带来的不便，敬请谅解！</p>
					
					<p style="color: #f56c6c; margin-top: 20px;"><strong>温馨提示：</strong>请提前保存好未发布的内容，以免数据丢失。</p>
				`,
				createTime: '2025-10-27 18:00',
				views: 1876,
				attachments: []
			}
		};

		notice.value = mockData[id] || {
			id: parseInt(id),
			type: '通知',
			title: '公告标题',
			content: '<p>暂无详细内容</p>',
			createTime: '2025-10-30',
			views: 0,
			attachments: []
		};

		// 加载相关公告
		const allNotices = [
			{ id: 1, type: '通知', title: '校园平台更新公告', createTime: '2025-10-30 10:00' },
			{ id: 2, type: '优化', title: 'UI界面全面优化', createTime: '2025-10-29 15:30' },
			{ id: 3, type: '活动', title: '校园编程大赛报名开始', createTime: '2025-10-28 09:00' },
			{ id: 4, type: '通知', title: '平台维护通知', createTime: '2025-10-27 18:00' }
		];
		relatedNotices.value = allNotices.filter(item => item.id !== parseInt(id)).slice(0, 3);

		loading.value = false;
	}, 500);
};

// 获取公告类型颜色
const getNoticeTypeColor = (type) => {
	const colorMap = {
		'通知': 'primary',
		'优化': 'success',
		'活动': 'warning'
	};
	return colorMap[type] || 'info';
};

// 点赞
const handleLike = () => {
	isLiked.value = !isLiked.value;
	uni.showToast({
		title: isLiked.value ? '点赞成功' : '已取消点赞',
		icon: 'none'
	});
};

// 收藏
const handleCollect = () => {
	isCollected.value = !isCollected.value;
	uni.showToast({
		title: isCollected.value ? '收藏成功' : '已取消收藏',
		icon: 'none'
	});
};

// 分享
const handleShare = () => {
	uni.showToast({
		title: '分享功能开发中',
		icon: 'none'
	});
};

// 下载附件
const handleDownload = (file) => {
	uni.showToast({
		title: '下载功能开发中',
		icon: 'none'
	});
};

// 点击相关公告
const handleRelatedClick = (id) => {
	// 重新加载页面数据
	loadNoticeDetail(id);
	// 滚动到顶部
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.notice-detail-page {
	min-height: 100vh;
	background: $bg-page;

	.loading-container {
		@include flex-center;
		min-height: 100vh;
	}

	.detail-container {
		padding-bottom: 120rpx;

		// 头部信息
		.header {
			background: $bg-card;
			padding: $spacing-lg;
			margin-bottom: $spacing-base;

			.type-tag {
				margin-bottom: $spacing-base;
			}

			.title {
				display: block;
				font-size: $font-xl;
				font-weight: $font-bold;
				color: $text-primary;
				line-height: $line-height-relaxed;
				margin-bottom: $spacing-base;
			}

			.meta-info {
				display: flex;
				gap: $spacing-lg;

				.meta-item {
					display: flex;
					align-items: center;
					gap: $spacing-xs;

					.meta-text {
						font-size: $font-xs;
						color: $text-tertiary;
					}
				}
			}
		}

		// 正文内容
		.content {
			background: $bg-card;
			padding: $spacing-lg;
			margin-bottom: $spacing-base;
			
			/* #ifdef H5 */
			// H5 端可以使用 :deep() 选择器控制 rich-text 内容样式
			:deep(.rich-text-h2) {
				font-size: $font-lg;
				font-weight: $font-semibold;
				color: $text-primary;
				margin: $spacing-lg 0 $spacing-base 0;

				&:first-child {
					margin-top: 0;
				}
			}

			:deep(.rich-text-h3) {
				font-size: $font-md;
				font-weight: $font-medium;
				color: $text-primary;
				margin: $spacing-base 0 $spacing-sm 0;
			}

			:deep(.rich-text-p) {
				font-size: $font-base;
				color: $text-secondary;
				line-height: $line-height-relaxed;
				margin-bottom: $spacing-base;
			}

			:deep(.rich-text-ul) {
				margin: $spacing-base 0;
				padding-left: $spacing-xl;

				.rich-text-li {
					font-size: $font-base;
					color: $text-secondary;
					line-height: $line-height-relaxed;
					margin-bottom: $spacing-sm;
				}
			}

			:deep(.rich-text-strong) {
				color: $text-primary;
				font-weight: $font-semibold;
			}
			/* #endif */
		}

		// 附件
		.attachments {
			background: $bg-card;
			padding: $spacing-lg;
			margin-bottom: $spacing-base;

			.section-title {
				display: flex;
				align-items: center;
				gap: $spacing-xs;
				font-size: $font-lg;
				font-weight: $font-semibold;
				color: $text-primary;
				margin-bottom: $spacing-base;
			}

			.attachment-list {
				.attachment-item {
					display: flex;
					align-items: center;
					gap: $spacing-base;
					padding: $spacing-base;
					background: $bg-page;
					border-radius: $radius-base;
					margin-bottom: $spacing-sm;

					&:last-child {
						margin-bottom: 0;
					}

					.file-info {
						flex: 1;

						.file-name {
							display: block;
							font-size: $font-base;
							color: $text-primary;
							margin-bottom: $spacing-xs;
						}

						.file-size {
							display: block;
							font-size: $font-xs;
							color: $text-tertiary;
						}
					}
				}
			}
		}

		// 底部操作
		.footer-actions {
			background: $bg-card;
			padding: $spacing-lg;
			margin-bottom: $spacing-base;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.action-left {
				display: flex;
				gap: $spacing-xl;

				.action-item {
					display: flex;
					align-items: center;
					gap: $spacing-xs;
					cursor: pointer;

					.action-text {
						font-size: $font-sm;
						color: $text-tertiary;

						&.active {
							color: $primary-color;
						}
					}
				}
			}
		}

		// 相关公告
		.related-section {
			background: $bg-card;
			padding: $spacing-lg;

			.section-title {
				display: flex;
				align-items: center;
				gap: $spacing-xs;
				font-size: $font-lg;
				font-weight: $font-semibold;
				color: $text-primary;
				margin-bottom: $spacing-base;
			}

			.related-list {
				.related-item {
					padding: $spacing-base 0;
					border-bottom: 1px solid $border-light;

					&:last-child {
						border-bottom: none;
					}

					.related-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: $spacing-xs;

						.related-time {
							font-size: $font-xs;
							color: $text-tertiary;
						}
					}

					.related-title {
						display: block;
						font-size: $font-base;
						color: $text-primary;
						@include ellipsis(1);
					}
				}
			}
		}
	}
}
</style>

